<template>
  <a-drawer
    title="心电图详情"
    placement="right"
    :visible="visible"
    :width="800"
    :body-style="{ paddingBottom: '80px' }"
    @close="onClose"
  >
    <template>
      <table border="1" width="700" align="center">
        <tr align="center">
          <th colspan="2">心电图（第{{second}}秒）{{loadMessage}}</th>
        </tr>
        <tr align="center">
          <th colspan="5"><div id="chart"></div>
            <div>
              <a-button @click="lastSecond()">上一秒</a-button>
              <a-button style="margin-left: 8px" @click="nextSecond()">下一秒</a-button>
              <span id="font" >共{{secondSum}}秒，跳至第
                <input style="width: 30px; color: black" v-model="second" @change="abc()"> 秒
              </span>
            </div>
          </th>
        </tr>
        <tr align="center">
          <th colspan="2">信息说明</th>
        </tr>
      </table>
    </template>
  </a-drawer>
</template>

<script>
  import { getInfo } from '@/api/medical/info'
  import { getHistoryInfo } from '@/api/medical/session'
  import { Chart } from '@antv/g2'
  export default {
    props: {
      index: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    data () {
      return {
        visible: false,
        chartVisible: false,
        ScoreInfo: {},
        scoreDetail: {},
        trainScore: [],
        chartData: [],
        myData: [],
        axisY: [],
        queryParam: {
          month: '',
          endMonth: ''
        },
        chart: {},
        second: 1,
        secondSum: '',
        i: 8,
        timer: '',
        loadMessage: ''
      }
    },
    methods: {
      abc () {
        this.myData.splice(0, this.myData.length)
        for (let i = 500 * (this.second - 1); i < 500 * this.second; i++) {
          this.myData.push({
            x: 0.002 * i + ' s',
            y: Number(this.axisY[i])
          })
        }
        this.initChart()
      },
      initChart () {
        if (this.chartVisible) {
          this.chart.clear()
        } else {
          this.chart = new Chart({
            container: 'chart',
            autoFit: true,
            height: 20
          })
        }
        this.chart.data(this.myData)
        this.chart.scale({
          x: {
            range: [0, 1]
          }
        })
        this.chart.axis('x', {
          tickLine: {
            alignTick: true,
            length: 1
          },
          label: {}
        })
        this.chart.axis('y', true)
        this.chart.tooltip({
          showCrosshairs: true, // 展示 Tooltip 辅助线
          shared: true
        })
        this.chart
          .line()
          .position('x*y')
        this.chart.render()
        this.chartVisible = true
      },
      getInfo (record) {
        this.visible = true
        this.ScoreInfo = record
        this.loadMessage = '正在加载……'
        getInfo(record)
          .then(res => {
            if (res.data.message !== 'error') {
              for (let i = 0; i < res.data.result.length; i++) {
                const y = JSON.stringify(res.data.result[i].ecgSamples)
                this.axisY.push.apply(this.axisY, y.substr(13, y.length - 17).split(','))
              }
              this.secondSum = res.data.result.length
              this.loadMessage = ''
              setTimeout(() => {
                this.abc()
              }, 400)
            }
          })
        if (this.chartVisible) {
          this.chart.clear()
        }
      },
      getHistoryInfo (record) {
        this.visible = true
        this.ScoreInfo = record
        this.loadMessage = '正在加载……'
        getHistoryInfo(record)
          .then(res => {
            if (res.data.message !== 'error' && res.data.result !== null) {
              for (let i = 0; i < res.data.result.length; i++) {
                const y = JSON.stringify(res.data.result[i].ecgSamples)
                this.axisY.push.apply(this.axisY, y.substr(13, y.length - 17).split(','))
              }
              this.secondSum = res.data.result.length
              this.loadMessage = ''
              setTimeout(() => {
                this.abc()
              }, 400)
            } else {
              this.$message.warn('该设备还没有数据', 2, this.onClose)
              if (this.chartVisible) {
                this.chart.clear()
              }
            }
          })
        if (this.chartVisible) {
          this.chart.clear()
        }
      },
      lastSecond () {
        if (this.second > 1) {
          this.second = Number(this.second) - 1
          setTimeout(() => {
            this.abc()
          }, 400)
        }
      },
      nextSecond () {
        if (this.second < this.secondSum) {
          this.second = Number(this.second) + 1
          setTimeout(() => {
            this.abc()
          }, 400)
        }
      },
      onClose () {
        this.visible = false
      }
    }
  }
</script>
<style>
  input::-webkit-input-placeholder{
    text-align: center;
  }
  table{
    border: 2px solid rgba(236,236,236,0.84);
  }
  tr{
    height: 75px;
  }
  th{
    background: rgba(250,250,250,0.84);
    color: black;
  }
  #chart {
    margin-top: 15px;
    margin-bottom: 8px;
    width: 80%;
    height: 330px;
  }
  #font {
    margin-top: 3px;
    margin-left: 10px;
    width: 150px;
    font-size: 12px;
    font-weight: normal;
    color: #99a2aa;
  }
</style>
